<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>换肤-点击事件以及滑入滑出事件</title>
	<link id="link" rel="stylesheet" type="text/css" href="">
	<script type="text/javascript">

	        function skin_blue(){
	            link.href='style-blue.css';
	        }

	        function skin_red(){
	            link.href='style-red.css';
	        }


		window.onload=function(){
			var blue=document.getElementById('blue');
			var red=document.getElementById('red');
			var link=document.getElementById('link');

 
             //onclick 用户鼠标点击事件  
			// blue.onclick=function(){
   //              skin_blue();
			// }

			// red.onclick=function(){
   //              skin_red();
			// }
            

            // onmouseover 用户鼠标移入元素时触发的事件。并执行onmouseover调用的函数。
            //onmouseout 用户鼠标移开元素时触发的事件。并执行onmouseout调用的函数。
            blue.onmouseover=function(){
            	skin_blue();
            }

            red.onmouseout=function(){
            	skin_red();
            }



		}
	</script>
</head>
<body>
	<input type="button" name="" id="blue" value="蓝">
	<input type="button" name="" id="red" value="红">
	<div class="oDiv"></div>
</body>
</html>